import { useState } from 'react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { 
  Search, 
  Sparkles, 
  FileText, 
  File, 
  Presentation, 
  Image, 
  Video, 
  Printer,
  Globe,
  Upload,
  MoreHorizontal,
  ArrowRight,
  X
} from 'lucide-react';

interface WhiteboardType {
  id: string;
  title: string;
  description: string;
  thumbnail: string;
  type: 'whiteboard';
}

interface Template {
  id: string;
  title: string;
  description: string;
  category: string;
  thumbnail: string;
  type: 'template';
}

const whiteboardTypes: WhiteboardType[] = [
  {
    id: 'graph',
    title: 'Graph (Unlimited)',
    description: 'Create unlimited graphs and charts',
    thumbnail: '/api/placeholder/300/200',
    type: 'whiteboard'
  },
  {
    id: 'whiteboard',
    title: 'Whiteboard',
    description: 'Blank canvas for brainstorming',
    thumbnail: '/api/placeholder/300/200',
    type: 'whiteboard'
  },
  {
    id: 'brainstorm',
    title: 'Brainstorm Whiteboard',
    description: 'Structured brainstorming sessions',
    thumbnail: '/api/placeholder/300/200',
    type: 'whiteboard'
  },
  {
    id: 'flowchart',
    title: 'Flowchart Whiteboard',
    description: 'Create process flows and diagrams',
    thumbnail: '/api/placeholder/300/200',
    type: 'whiteboard'
  }
];

const templates: Template[] = [
  {
    id: '1',
    title: 'Project Phase Workflow',
    description: 'Multi-phase project management template',
    category: 'Project Management',
    thumbnail: '/api/placeholder/300/200',
    type: 'template'
  },
  {
    id: '2',
    title: 'Business Project Gantt Chart',
    description: 'Comprehensive project timeline template',
    category: 'Business',
    thumbnail: '/api/placeholder/300/200',
    type: 'template'
  },
  {
    id: '3',
    title: 'Comparison Chart',
    description: 'Feature comparison template',
    category: 'Analysis',
    thumbnail: '/api/placeholder/300/200',
    type: 'template'
  },
  {
    id: '4',
    title: 'Office Floor Plan',
    description: 'Office layout and planning template',
    category: 'Architecture',
    thumbnail: '/api/placeholder/300/200',
    type: 'template'
  }
];

const sidebarCategories = [
  { id: 'for-you', label: 'For you', icon: Sparkles, active: false },
  { id: 'sheets', label: 'Sheets', icon: FileText, active: false },
  { id: 'docs', label: 'Docs', icon: File, active: false },
  { id: 'whiteboards', label: 'Whiteboards', icon: Presentation, active: true },
  { id: 'presentations', label: 'Presentations', icon: Presentation, active: false },
  { id: 'social-media', label: 'Social media', icon: Image, active: false },
  { id: 'photo-editor', label: 'Photo editor', icon: Image, active: false },
  { id: 'videos', label: 'Videos', icon: Video, active: false },
  { id: 'print-products', label: 'Print products', icon: Printer, active: false },
  { id: 'websites', label: 'Websites', icon: Globe, active: false },
  { id: 'custom-size', label: 'Custom size', icon: FileText, active: false },
  { id: 'upload', label: 'Upload', icon: Upload, active: false },
  { id: 'more', label: 'More', icon: MoreHorizontal, active: false },
];

interface TemplateLibraryProps {
  isOpen: boolean;
  onClose: () => void;
}

export function TemplateLibrary({ isOpen, onClose }: TemplateLibraryProps) {
  const [searchQuery, setSearchQuery] = useState('');

  const handleUseTemplate = (item: WhiteboardType | Template) => {
    console.log('Using template:', item.title);
    onClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-7xl max-h-[90vh] p-0 bg-background">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-border">
          <h1 className="text-2xl font-bold text-foreground">Create a design</h1>
          <Button variant="ghost" size="sm" onClick={onClose} className="h-8 w-8 p-0">
            <X className="h-4 w-4" />
          </Button>
        </div>

        <div className="flex h-[calc(90vh-80px)]">
          {/* Left Sidebar */}
          <div className="w-64 border-r border-border bg-background">
            <ScrollArea className="h-full">
              <div className="p-4 space-y-2">
                {sidebarCategories.map((category) => {
                  const IconComponent = category.icon;
                  return (
                    <div
                      key={category.id}
                      className={`flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors ${
                        category.active 
                          ? 'bg-purple-100 text-purple-700 font-medium' 
                          : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                      }`}
                    >
                      <IconComponent className="h-5 w-5" />
                      <span className="text-sm">{category.label}</span>
                    </div>
                  );
                })}
              </div>
            </ScrollArea>
          </div>

          {/* Main Content */}
          <div className="flex-1 p-6">
            {/* Search Bar */}
            <div className="relative mb-8">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
              <Input
                placeholder="What would you like to create?"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-12 h-12 text-base bg-muted/50 border-border rounded-full"
              />
            </div>

            <ScrollArea className="h-[calc(100%-100px)]">
              {/* Whiteboards Section */}
              <div className="mb-8">
                <h2 className="text-xl font-semibold text-foreground mb-4">Whiteboards</h2>
                <div className="grid grid-cols-4 gap-4 mb-2">
                  {whiteboardTypes.map((whiteboard) => (
                    <div
                      key={whiteboard.id}
                      className="group cursor-pointer"
                      onClick={() => handleUseTemplate(whiteboard)}
                    >
                      <div className="bg-muted rounded-lg overflow-hidden mb-2 h-32 flex items-center justify-center relative hover:shadow-md transition-shadow">
                        <div className="w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center">
                          <div className="grid grid-cols-2 gap-2">
                            <div className="w-6 h-6 bg-blue-400 rounded"></div>
                            <div className="w-6 h-6 bg-purple-400 rounded"></div>
                            <div className="w-6 h-6 bg-cyan-400 rounded"></div>
                            <div className="w-6 h-6 bg-pink-400 rounded"></div>
                          </div>
                        </div>
                      </div>
                      <h3 className="font-medium text-sm text-foreground group-hover:text-primary transition-colors">
                        {whiteboard.title}
                      </h3>
                    </div>
                  ))}
                </div>
              </div>

              {/* Templates Section */}
              <div>
                <div className="flex items-center justify-between mb-4">
                  <h2 className="text-xl font-semibold text-foreground">Whiteboard templates</h2>
                  <Button variant="ghost" className="text-purple-600 hover:text-purple-700">
                    See all
                    <ArrowRight className="h-4 w-4 ml-1" />
                  </Button>
                </div>
                <div className="grid grid-cols-4 gap-4">
                  {templates.map((template) => (
                    <div
                      key={template.id}
                      className="group cursor-pointer"
                      onClick={() => handleUseTemplate(template)}
                    >
                      <div className="bg-muted rounded-lg overflow-hidden mb-2 h-48 relative hover:shadow-md transition-shadow">
                        <div className="w-full h-full bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center">
                          <div className="text-xs text-muted-foreground text-center p-4">
                            <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg mb-2 mx-auto"></div>
                            {template.title}
                          </div>
                        </div>
                      </div>
                      <h3 className="font-medium text-sm text-foreground group-hover:text-primary transition-colors line-clamp-2">
                        {template.title}
                      </h3>
                    </div>
                  ))}
                </div>
              </div>
            </ScrollArea>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}